<template>
  <div class="nr">
    <div
      :class="item.checked ? 'dbjs' : 'nrItem'"
      v-for="(item, index) in store.nums"
      :key="index"
    >
      <input type="checkbox" v-model="item.checked" />
      <div class="counter">{{ item.counter }}</div>
      <div class="x" @click="del(index)">X</div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, defineProps } from 'vue'
//引入定义的数据
import { userInfo } from '@/stores/userInfo'
export default {
  setup(props, context) {
    //调用方法
    const store = userInfo()
    const data = reactive({})
    const del = (index) => {
      context.emit('del', index)
    }
    return {
      ...toRefs(data),
      store,
      del
    }
  }
}
</script>
<style lang="scss" scoped>
.nr {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 60px;
  .nrItem {
    width: 100%;
    height: 36px;
    display: flex;
    box-sizing: border-box;
    padding: 0 5px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .dbjs {
    width: 100%;
    height: 36px;
    display: flex;
    box-sizing: border-box;
    padding: 0 5px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    background-color: #fe7345;
    color: #fff;
    border-radius: 5px;
    text-decoration: line-through;
  }
}
</style>
